
<template>
  <div id="main" class="content-box">
    <div class="statistics">
      <el-row class="padding">
       <!-- <el-col :span="7">
           <span class="tip">
               核心指标类报表为预计算指标只能选择固定时间
             &lt;!&ndash;                <br />&ndash;&gt;
             &lt;!&ndash;                状况及变化趋势。看板内的数据遵循统一的指标字典&ndash;&gt;
           </span>
       </el-col> -->
        <el-col :span="24" class="ex-style">
            <el-radio-group style="display: flex"
                v-model="dateType"
                @change="changeDateType"
            >
              <el-radio-button label="daterange"
              >日</el-radio-button
              >
              <el-radio-button label="week"
              >周</el-radio-button
              >
              <el-radio-button label="month"
              >月</el-radio-button
              >
              <el-radio-button label="year"
              >年</el-radio-button
              >
            </el-radio-group>
          <ksdate
              ref="ksdate1"
              :vuexModelName="vuexModelName"
              :id="'startRange'"
              :date="startdate"
              :type="dateType"
              @changeDateType="changeDateType"
              @getDate="getDate"
          ></ksdate>
          <el-button
              style="width:100px"
              type="text"
              class="setting-btn"
              icon="el-icon-plus"
              @click="changeCompare"
          >
            添加对比
          </el-button>
          <ksdate
              v-show="showCompareDate"
              ref="ksdate2"
              :vuexModelName="vuexModelName"
              :id="'endRange'"
              :date="enddate"
              :type="dateType"
              @getDate="(value1,value2) => {params.endRange.startDate=value1,params.endRange.endDate=value2}"
              @changeCompare="(value) => {showCompareDate = value}"
              @changeDateType="changeDateType"
          ></ksdate>
        </el-col>
      </el-row>
      <el-row class="padding">
        <el-button class="check" type="primary" @click="doCheck()">查询</el-button>
        <filtrate
            ref="filtrate"
            @filterDimension="(value) => {params.filterDimension = value}"
            @platform="(value) => {params.platform = value}"
            @businessTypeALLId="(value) => {businessTypeALLId = value}"
        ></filtrate>
      </el-row>
               <!-- <el-row style="text-align: right">
                 <el-button type="primary" @click="doCheck()">查询</el-button>
               </el-row> -->
      
      <el-radio-group v-model="tabPosition" style="margin-left: 10px;" class="longshort">
        <el-radio-button label="topone">整体</el-radio-button>
        <el-radio-button label="top">app</el-radio-button>
        <el-radio-button label="right">android</el-radio-button>
        <el-radio-button label="bottom">ios</el-radio-button>
        <el-radio-button label="leftone">微信</el-radio-button>
        <el-radio-button label="left">其他</el-radio-button>
      </el-radio-group>

      <ksdatepane
          :dataReportInfoYear="dataReportInfoYear"
          :payPart = "payPart"
          :showCompareDate = "showCompareDate"
      ></ksdatepane>
      <ksdatepane-two
          :dataReportInfoYear="dataReportInfoYear"
          :payPart = "payPart"
          :showCompareDate = "showCompareDate"
      ></ksdatepane-two>
      <analyze
          :dataReportInfoYear="dataReportInfoYear"
          :payPart = "payPart"
          :showCompareDate = "showCompareDate"
      ></analyze>
      <chart
          :vuexModelName="vuexModelName"
          id="chart1"
          ref="chart1"
          :staticticsData="orderPlace"
          :staticticsDataFirst="orderPlaceFirst"
          :directions="orderPlace.yAxis"
          :description="description"
          :options="{
            title: '订单下单',
            type: '下单',
            buttonList: ['金额', '订单量', '用户数'],
            statisticsList: [
                {
                  name: '表格',
                  label: 'form'
                },
                {
                  name: '折线图',
                  label: 'line'
                },
                {
                  name: '柱状图',
                  label: 'bar'
                }],
            dscription: '自2021-7-13 至 2021-8-11 数据变化趋势',
            rightTopChangeType: true,
            changeDirection: true,
          }"
          @searchChart="searchChart"
          @condition="(value) => {conditionChart1 = value}"
      >
      </chart>
      <chart
          :vuexModelName="vuexModelName"
          id="chart2"
          ref="chart2"
          :staticticsData="orderPay"
          :staticticsDataFirst="orderPayFirst"
          :directions="orderPay.yAxis"
          :description="description"
          :options="{
              title: '订单付费',
              type: '支付',
              buttonList: ['金额', '订单量', '用户数', '用户付费转化率'],
              statisticsList: [
                  {
                    name: '表格',
                    label: 'form'
                  },
                  {
                    name: '折线图',
                    label: 'line'
                  },
                  {
                    name: '柱状图',
                    label: 'bar'
                  }],
              dscription: '自2021-7-13 至 2021-8-11 数据变化趋势',
              rightTopChangeType: true,
              changeDirection: true,
          }"
          @searchChart="searchChart"
          @condition="(value) => {conditionChart2 = value}"
      >
      </chart>
      <chart
          :vuexModelName="vuexModelName"
          id="chart3"
          ref="chart3"
          :staticticsData="orderRefund"
          :staticticsDataFirst="orderRefundFirst"
          :directions="orderRefund.yAxis"
          :description="description"
          :options="{
                title: '订单退款',
                type: '退款',
                buttonList: ['金额', '订单量', '用户数', '用户退费率'],
                statisticsList: [
                    {
                      name: '表格',
                      label: 'form'
                    },
                    {
                      name: '折线图',
                      label: 'line'
                    },
                    {
                      name: '柱状图',
                      label: 'bar'
                    }],
                dscription: '自2021-7-13 至 2021-8-11 数据变化趋势',
                rightTopChangeType: true,
                changeDirection: true,
            }"
          @searchChart="searchChart"
          @condition="(value) => {conditionChart3 = value}"
      >
      </chart>
    </div>
  </div>
</template>
<script>
import eventHub from '@/utils/eventHub'
import ksdatepane from '@/components/ksdatapane.vue'
import ksdatepaneTwo from '@/components/ksdatapaneTwo.vue'
import analyze from '@/components/analyze.vue'
import chart from '@/components/chart.vue'
import filtrate from '@/components/filtrate.vue'
import dayjs from 'dayjs'
import {payPart, orderPlace, orderPay, orderRefund, userInfo} from "@/assets/js/api"

import maintenanceModule from '@/pages/home/homeModule'
import { searchParamsComputed } from '@/utils'
const computed = searchParamsComputed(
    Object.keys(maintenanceModule.state.postParams),
    'homeModule'
)

export default {
  components: {
    ksdatepane,
    ksdatepaneTwo,
    analyze,
    chart,
    filtrate,
  },
  data() {
    return {
      tabPosition:'topone',
      conditionChart1: '',
      conditionChart2: '',
      conditionChart3: '',
      businessTypeALLId: [],
      // pageTabs: ["核心看板","敏捷看板"],
      // pageTab: '核心看板',
      userName: '暂未登录',
      vuexModelName: 'homeModule',
      statisticsTab: '柱状图',
      // 开始时间
      YearDate: new Date().getFullYear() + '/01/01',
      startdate: new Date(new Date().getTime() - 3600 * 1000 * 24),
      enddate: new Date(new Date().getTime() - 3600 * 1000 * 48),
      startDate: dayjs(new Date().getTime() - 3600 * 1000 * 24)
          .startOf('date')
          .format('YYYY-MM-DD'),
      endDate: dayjs(new Date().getTime() - 3600 * 1000 * 24)
          .startOf('date')
          .format('YYYY-MM-DD'),
      dataReportInfoYear: {
        totalAmount: '',
        totalTaxAmount: '',
        consumeAmount: '',
      },
      payPart: {                //    面板数据
        customUnitRatio: "" || 1,
        customerUnitPriceComparison: "" || "1%",
        orderCnt: "" || 1,
        orderCntRatio: "" || "1%",
        orderNum: "" || 1,
        orderNumRatio: "" || "1%",
        orderPrice: "" || 1,
        orderPriceRatio: "" || "1%",
        payCnt: "" || 1,
        payCntRatio: "" || "1%",
        payConversionRateComparison: "" || "1%",
        payConversionRatio: "" || "1%",
        payNum: "" || 1,
        payNumRatio: "" || "1%",
        payPrice: "" || 1,
        payPriceRatio: "" || "1%"
      },
      showCompareDate: false,
      params: {
        busiType:"bussiness",
        indexSetCode:"abc1234ACDS",
        busiId:"appCodeBusinessId",
        userName:"chaixiubing",
        dateMark:'day',
        startRange:{
          startDate:"",//yyyy-mm-dd格式
          endDate:""//yyyy-mm-dd格式
        },
        endRange:{
          startDate:"0000-00-00",//yyyy-mm-dd格式
          endDate:"0000-00-00"//yyyy-mm-dd格式
        },
        platform:"",
        filterDimension:[
          {
            businessType:[]//业务类型
          },
          {
            memberShip:[]//会员身份
          },
          // {
          //   isNewVip:[]//新老用户
          // },
          {
            memberShipInter: []   //会员权益
          }
        ]
      },   // 查询参数
      orderPlace: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          }
        ],
      },
      orderPlaceFirst: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          }
        ],
      },
      orderPay: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          }
        ],
      },
      orderPayFirst: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          }
        ],
      },
      orderRefund: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          }
        ],
      },
      orderRefundFirst: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130],
            '比率':[120, 200, 150, 80, 70, 110, 130]
          }
        ],
      },
      description: ''
    }
  },
  computed: {
    ...computed,
    tableHeight() {
      return this.$store.state.element.tableHeight + 62
    },
  },
  created() {
    console.log(this.params)
    this.searchBtnClick()
    this.staticticsData = {
      type: 'line',
      xAxis:[
        {
          name:'timelist1', // x轴当前时间，可以自己定
          type:"category",
          data:[120, 200, 150, 80, 70, 110, 130]
        },
        {
          name:'timelist2',// x轴当前时间，可以自己定
          type:"category",
          data:[12, 20, 15, 8, 7, 11, 13],
        },
      ],
      yAxis:[
        {
          name:'category1',// y轴业务类型
          type:"bar",// 图表类型
          data:[120, 200, 150, 80, 70, 110, 130]
        },
        {
          name:'category2',// y轴业务类型
          type:"bar",// 图表类型
          data:[120, 200, 150, 80, 70, 110, 130],
        },
        {
          name:'category3',// y轴业务类型
          type:"bar",// 图表类型
          data:[120, 200, 150, 80, 70, 110, 130],
        },
        {
          name:'category4',// y轴业务类型
          type:"bar",// 图表类型
          data:[12, 200, 150, 80, 70, 11, 130],
        }
      ],
    }
  },
  async mounted() {
      // let res = await isLogin()
      // if (res.code == 0) {
      // this.$nextTick(() =>{
      //   this.doCheck()
      //   this.routerFirst()
      //   this.getUserInfo()
      // })
      // }else{
      //     this.login();
      // }
    // isLogin()
    //     .then((res) => {
    //       console.log(res)
    //       if (res.code === 0) {
    //         this.$nextTick(() =>{
    //           this.routerFirst()
    //           this.getUserInfo()
    //         })
    //       }else{
    //           this.login();
    //       }
    //     })
    //     .catch(() => {
    //       this.login();
    //     });
    this.$nextTick(() =>{
      this.doCheck()
    })
  },
  methods: {
    login() {
      let url =
          "/ks-data-bussiness-api/ks-data-bussiness-api/login?referUrl=" + window.location.href;
      window.location.href = url;
    },
    changeCompare() {
      this.changeDateType(this.dateType)
      console.log(this.params.endRange.startDate)
      // if(this.params.endRange.startDate === '0000-00-00'){
      //   this.showCompareDate = false
      // }else{
      //   this.showCompareDate = true
      // }
      this.showCompareDate = true
    },
    searchChart(id) {
      console.log(this.$refs[id], '-----------')
      console.log(this.$store.state.homeModule.postParams)
      // axiosChartData.then(params,(res)=>{
      // this.$refs.[id][0].$refs[id].search(res)
      // })
    },
    changeDateType(e) {
      this.params.endRange.startDate = "0000-00-00"
      this.params.endRange.endDate = "0000-00-00"
      this.showCompareDate = false
      this.dateType = e
      if (e === 'daterange') {
        this.startdate = new Date().getTime() - 3600 * 1000 * 24
        this.enddate = new Date().getTime() - 3600 * 1000 * 24
        this.params.dateMark = 'day'
      }
      if (e === 'week') {
        this.startdate = new Date().getTime()
        this.enddate = new Date().getTime()
        this.params.dateMark = 'week'
      }
      if(e === 'month'){
        this.params.dateMark = 'month'
      }
      if(e === 'year'){
        this.params.dateMark = 'year'
      }
      console.log(this.$refs.ksdate1)
      this.$refs.ksdate1.changeDate(this.startdate)
      this.$refs.ksdate1.changeDate(this.enddate)
      this.$refs.ksdate2.changeDate(this.startdate)
      this.$refs.ksdate2.changeDate(this.enddate)
    },
    // 时间组件返回数据处理事件
    getDate(value1,value2){
      console.log(value1)
      this.params.startRange.startDate = value1
      this.params.startRange.endDate = value2
      if(value1 === value2){
        // let nowDate = new Date(value1).getTime() - 3600 * 1000 * 24 * 30
        // let lastDate = dayjs(nowDate).startOf('date').format('YYYY-MM-DD')
        // console.log(lastDate)
      }else{
        this.description = "自" + " " + value1 + " " + "至" + " " + value2 + " " +  "数据变化趋势"
      }
    },
    searchBtnClick() {
      if (!this.showCompareDate) {
        this.$store.commit(this.vuexModelName + '/updatePostParams', {
          endRange: {
            startDate: '0000-00-00',
            endDate: '0000-00-00',
          },
        })
      }
      this.getDataReportInfoYear()
    },
    async getDataReportInfoYear() {
      try {
        let data = { year: [{ name: '11' }] }
        this.dataReportInfoYear = Object.assign(
            {},
            this.dataReportInfoYear,
            data.year
        )
      } catch (err) {
        this.$$message(err, 'error')
      }
    },
    //  点击查询
    doCheck() {
      console.log(this.params.filterDimension[0].businessType)
      if(this.params.filterDimension[0].businessType.length > 0){
        let type = typeof (this.params.filterDimension[0].businessType)
        console.log(type)
        if(type === 'string'){
          this.params.filterDimension[0].businessType = this.params.filterDimension[0].businessType.split(',')
        }
      }else{
        this.params.filterDimension[0].businessType = []
      }
      console.log(this.params)
      // 重置对比日期
      console.log(this.showCompareDate)
      if (this.showCompareDate === false) {
        console.log(1)
        this.params.endRange.startDate = "0000-00-00"
        this.params.endRange.endDate = "0000-00-00"
      }
      // 判断筛选条件是否都已经选择
      console.log(this.params.platform)
      if(this.params.platform === ""){
        console.log(1)
        this.$message.error('请完成平台筛选维度条件')
      } else {
        this.$nextTick(() => {
          console.log(this.businessTypeALLId)
          // this.getPayPart()
          this.getOrderPlace()
          // this.getOrderPay()
          // this.getOrderRefund()
          this.$refs.filtrate.drawShow()
        })
      }
    },
    //查询面板数据
    getPayPart(){
      let params = JSON.parse(JSON.stringify(this.params))
      console.log(this.businessTypeALLId)
      console.log(params.filterDimension[1].memberShip)
      if(params.filterDimension[1].memberShip.indexOf("4") > -1){
        // params.filterDimension[2].memberShipInter.push("0")
      }else{
        let index = params.filterDimension[2].memberShipInter.indexOf("0");
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      if(params.filterDimension[1].memberShip.includes('全部')){
        params.filterDimension[1].memberShip.shift()
      }
      if(params.filterDimension[2].memberShipInter.includes('全部')){
        params.filterDimension[2].memberShipInter.shift()
      }
      console.log(params)
      payPart(params)
          .then((data)=>{
            console.log(data)
            this.payPart = data
          })
    },
    // 查询订单下单图表数据
    getOrderPlace(){
      let params = JSON.parse(JSON.stringify(this.params))
      console.log(this.businessTypeALLId)
      if(params.filterDimension[1].memberShip.indexOf("4") > -1){
        // params.filterDimension[2].memberShipInter.push("0")
      }else{
        let index = params.filterDimension[2].memberShipInter.indexOf("0");
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      if(params.filterDimension[1].memberShip.includes('全部')){
        params.filterDimension[1].memberShip.shift()
      }
      if(params.filterDimension[2].memberShipInter.includes('全部')){
        params.filterDimension[2].memberShipInter.shift()
      }
      console.log(params)
      orderPlace(params)
          .then((data)=>{
            console.log(data)
            let dateData = JSON.parse(JSON.stringify(data))
            console.log(dateData.data.xAxis[0].data)
            let startDate = dateData.data.xAxis[0].data[0]
            let index = dateData.data.xAxis[0].data.length - 1
            let endDate = dateData.data.xAxis[0].data[index]
            this.orderPlaceFirst.xAxis = data.data.xAxis
            this.orderPlaceFirst.yAxis = data.data.yAxis
            this.orderPlace.xAxis = data.data.xAxis
              if(this.conditionChart1 === ''){
                  this.orderPlace.yAxis = data.data.yAxis.map((item) =>{
                      return{
                          name: item.name,
                          type: item.type,
                          data: item['金额']
                      }
                  })
              }else{
                  let str = this.conditionChart1
                  if(str === '订单量'){
                      str = '次数'
                  }
                  if(str === '用户数'){
                      str = '人数'
                  }
                  this.orderPlace.yAxis = data.data.yAxis.map((item) =>{
                      return{
                          name: item.name,
                          type: item.type,
                          data: item[str]
                      }
                  })
              }
            console.log(this.orderPlaceFirst)
            console.log(this.orderPlace)
            this.$nextTick(() =>{
              this.$refs.chart1.changeAllData()
              this.$refs.chart1.changeAllFormData()
              this.description = "自" + " " + startDate + " " + "至" + " " + endDate + " " +  "数据变化趋势"
              console.log(this.$refs.chart2)
            })
          })
    },
    // 查询订单支付图表数据
    getOrderPay(){
      let params = JSON.parse(JSON.stringify(this.params))
      if(params.filterDimension[1].memberShip.indexOf("4") > -1){
        // params.filterDimension[2].memberShipInter.push("0")
      }else{
        let index = params.filterDimension[2].memberShipInter.indexOf("0");
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      if(params.filterDimension[1].memberShip.includes('全部')){
        params.filterDimension[1].memberShip.shift()
      }
      if(params.filterDimension[2].memberShipInter.includes('全部')){
        params.filterDimension[2].memberShipInter.shift()
      }
      console.log(params)
      orderPay(params)
          .then((data)=>{
            console.log(data)
            this.orderPayFirst.xAxis = data.data.xAxis
            this.orderPayFirst.yAxis = data.data.yAxis
            console.log(data.data)
            this.orderPay.xAxis = data.data.xAxis
              if(this.conditionChart2 === ''){
                  this.orderPay.yAxis = data.data.yAxis.map((item) =>{
                      return{
                          name: item.name,
                          type: item.type,
                          data: item['金额']
                      }
                  })
              }else{
                  let str = this.conditionChart2
                  if(str === '订单量'){
                      str = '次数'
                  }
                  if(str === '用户数'){
                      str = '人数'
                  }
                  if(str === '用户付费转化率'){
                    str = '比率'
                  }
                  this.orderPay.yAxis = data.data.yAxis.map((item) =>{
                      return{
                          name: item.name,
                          type: item.type,
                          data: item[str]
                      }
                  })
              }
            console.log(this.orderPayFirst)
            console.log(this.orderPay)
            this.$nextTick(() =>{
              this.$refs.chart2.changeAllData()
              this.$refs.chart2.changeAllFormData()
              console.log(this.$refs.chart2)
            })
          })
    },
    // 查询订单退款图表数据
    getOrderRefund(){
      let params = JSON.parse(JSON.stringify(this.params))
      if(params.filterDimension[1].memberShip.indexOf("4") > -1){
        // params.filterDimension[2].memberShipInter.push("0")
      }else{
        let index = params.filterDimension[2].memberShipInter.indexOf("0");
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      if(params.filterDimension[1].memberShip.includes('全部')){
        params.filterDimension[1].memberShip.shift()
      }
      if(params.filterDimension[2].memberShipInter.includes('全部')){
        params.filterDimension[2].memberShipInter.shift()
      }
      console.log(params)
      orderRefund(params)
          .then((data)=>{
            console.log(data)
            this.orderRefundFirst.xAxis = data.data.xAxis
            this.orderRefundFirst.yAxis = data.data.yAxis
            console.log(data.data)
            this.orderRefund.xAxis = data.data.xAxis
              if(this.conditionChart3 === ''){
                  this.orderRefund.yAxis = data.data.yAxis.map((item) =>{
                      return{
                          name: item.name,
                          type: item.type,
                          data: item['金额']
                      }
                  })
              }else{
                  let str = this.conditionChart3
                  if(str === '订单量'){
                      str = '次数'
                  }
                  if(str === '用户数'){
                      str = '人数'
                  }
                  if(str === '用户退费率'){
                    str = '比率'
                  }
                  this.orderRefund.yAxis = data.data.yAxis.map((item) =>{
                      return{
                          name: item.name,
                          type: item.type,
                          data: item[str]
                      }
                  })
              }
            console.log(this.orderRefundFirst)
            console.log(this.orderRefund)
            this.$nextTick(() =>{
              this.$refs.chart3.changeAllData()
              this.$refs.chart3.changeAllFormData()
              console.log(this.$refs.chart3)
            })
          })
    },
    //  点击切换tab
    handleClick(tab){
      console.log(tab.name)
      if(tab.name === '敏捷看板'){
        this.$router.push({path:'/home/agility'})
        let router = [{path:'/home/agility',name:"home/agility",meta:{"title":"行为看板"}}]
        eventHub.$emit('add', router)
      }else if(tab.name === '核心看板'){
        this.$router.push({path:'/home'})
        let router = [{path:'/',name:"home",meta:{"title":"交易看板"}}]
        eventHub.$emit('add', router)
      }
    },
    routerFirst(){
      if(this.pageTab === '敏捷看板'){
        let router = [{path:'/home/agility',name:"home/agility",meta:{"title":"行为看板"},show: true}]
        eventHub.$emit('add', router)
      }else if(this.pageTab === '核心看板'){
        console.log(1111111)
        let router = [{path:'/',name:"home",meta:{"title":"交易看板"},show: true}]
        eventHub.$emit('add', router)
      }
    },
    logout() {
      window.location.href = "/ks-data-support/logout";
    },
    // 获取用户信息
    getUserInfo(){
      userInfo().then(res=>{
        console.log(res)
        this.userName = res.data.realName
        this.params.userName = res.data.userName
        // 查询数据
        this.doCheck()
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.longshort ::v-deep span.el-radio-button__inner {
    width: 100px;
    height: 34px;
    line-height: 8px;
}
.statistics {
  padding-top: 8px;
  box-sizing: border-box;
  background: #fff;
  .headerBar {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #181818;
    border-bottom: 1px solid #eee;
    background: #fff;
    span {
      margin-left: 20px;
    }
  }
}
.tip {
  color: #666;
  font-size: 12px;
}
.empty{
  width: 88%;
  height: 60px;
  background-color: white;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  border-bottom: #9fa5b6 solid 1px;
}
.check{
  position: absolute;
  right: 0;
  margin-top: 12px!important;
  margin-right: 10px!important;
}
.padding{
  padding-left: 10px;
  box-sizing: border-box;
}
.el-dropdown {
  position: fixed;
  right: 20px;
  top: 20px;
  color: #000000;
  z-index: 9999;
}
.ex-style{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
</style>
